// pages/user/user.js
//导入共享数据包
import { storeBindingsBehavior } from 'mobx-miniprogram-bindings'
import { store } from '../../store/store'

const defaultAvatarUrl = 'https://mmbiz.qpic.cn/mmbiz/icTdbqWNOwNRna42FI242Lcia07jQodd2FJGIYQfG0LAJGFxM4FbnQP6yfMxBgJ0F3YRqJCJ1aPAK2dQagdusBZg/0'

Page({
    //共享数据相关配置
    options: {
        styleIsolation: 'shared'
    },
    
    behaviors: [storeBindingsBehavior],

    //引入需要的共享数据
    storeBindings: {
        store,
        fields: {
            token: 'token',
            userInfo: 'userInfo'
        },
        actions: {
            updateToken: 'updateToken',
            updateUserInfo: 'updateUserInfo',
            updateUserName: 'updateUserName',
            updateUserAvatar: 'updateUserAvatar'
        }
    },

    /**
     * 页面的初始数据
     */
    data: {
        avatarUrl: defaultAvatarUrl,
        nickname: null,
        isChangingInfo: false,

        //头像选择框
        show: false,
        avatarList: [
            '/images/avatar/1.jpg',
            '/images/avatar/2.jpg',
            '/images/avatar/3.jpg',
            '/images/avatar/4.jpg',
            '/images/avatar/5.jpg',
            '/images/avatar/6.jpg',
            '/images/avatar/7.jpg',
            '/images/avatar/8.jpg',
            '/images/avatar/9.jpg',
            '/images/avatar/10.jpg'
        ]
    },

    //用户头像修改
    changeUserAvatar(e) {
        this.setData({
            show: false,
            avatarUrl : e.currentTarget.dataset.avatar
        })
    },

    //头像选择框vant需要方法
    showPopup() {
        this.setData({ show: true });
      },
      onClose() {
        this.setData({ show: false });
      },

    //取消修改用户信息
    undoUpdateUserInfo() {
        this.setData({
            isChangingInfo : false,
            avatarUrl: store.userInfo.avatarUrl
        })
    },

    //点击了修改个人信息按钮
    changeUserInfo() {
        this.setData({
            isChangingInfo: true
        })
    },

    //提交修改用户信息
    submitUserInfo() {
        wx.request({
          url: `${store.programURL}/user/updateInfo`,
          method: 'POST',
          header: {
            authentication: store.token
          },
          data: {
            userId: store.userInfo.id,
            avatarUrl: this.data.avatarUrl,
            name: this.data.nickname
          },
          success:(res) => {
            console.log(res)
            this.setData({
                isChangingInfo: false
            })
            //更新store全局用户信息
            this.updateUserAvatar(this.data.avatarUrl)
            this.updateUserName(this.data.nickname)
          }
        })
    },

    //监听用户昵称变化
    onNicknameChange(e) {
        this.setData({
            nickname: e.detail.value
        })
    },

    //监听用户头像变化
    onChooseAvatar(e) {
        console.log(e)
        const { avatarUrl } = e.detail 
        this.setData({
          avatarUrl,
        })
      },

    //用户退出登录方法
    undoLogin() {
        this.setData({
            nickname: null,
            avatarUrl: defaultAvatarUrl
        })
        this.updateToken(null)
    },

    //用户登录方法
    userLogin() {
        wx.login({
          success: (res) => {
            console.log(res.code)
            wx.request({
              url: `${store.programURL}/user/wxLogin`,
              method: 'POST',
              data: {
                code: res.code
              },
              success: (res) => {
                console.log(res)
                this.setData({
                    nickname: res.data.data.nickname,
                    avatarUrl: res.data.data.avatarUrl
                })
                this.updateUserInfo(res.data.data)
                this.updateToken(res.data.data.token)
              }
            })
          },
        })
    },

    /**
     * 生命周期函数--监听页面加载
     */
    onLoad(options) {

    },

    /**
     * 生命周期函数--监听页面初次渲染完成
     */
    onReady() {

    },

    /**
     * 生命周期函数--监听页面显示
     */
    onShow() {
        
    },

    /**
     * 生命周期函数--监听页面隐藏
     */
    onHide() {

    },

    /**
     * 生命周期函数--监听页面卸载
     */
    onUnload() {

    },

    /**
     * 页面相关事件处理函数--监听用户下拉动作
     */
    onPullDownRefresh() {

    },

    /**
     * 页面上拉触底事件的处理函数
     */
    onReachBottom() {

    },

    /**
     * 用户点击右上角分享
     */
    onShareAppMessage() {

    }
})